import { Component, OnInit ,SimpleChanges} from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: 'equip-utilization-info',
    template: `<div class='utilizationContainer'>
                    <div>
                        <div class='week' echarts [options]="option1"></div>
                        <span>周度：42.75%<span (click)='isVisible = true'>!!!</span></span>
                    </div>
                    <div>
                        <div class='month' echarts [options]="option2"></div>
                        <span>月度：51.94%</span>
                    </div>
                    <div>
                        <div class='year' echarts [options]="option3"></div>
                        <span>年度：53.73%</span>
                    </div>
               </div>
               <nz-modal nzCentered [nzVisible]='isVisible'  nzTitle='利用率过低' [nzMask]='false' (nzOnCancel)='handleCloseOrCancel()'>
                    <div *nzModalContent>
                        <form nz-form  [formGroup]="validateForm">
                            
                            <nz-form-item> 
                                <nz-form-label [nzSpan]="6"  [nzNoColon]='true'></nz-form-label>
                                <nz-form-control [nzSpan]="14">
                                <nz-radio-group  formControlName="status" (ngModelChange)='ngOnChanges($event)'>
                                    <label nz-radio nzValue="0">异常</label>
                                    <label nz-radio nzValue="1">正常</label>
                                </nz-radio-group>
                                </nz-form-control>              
                            </nz-form-item> 
                            <nz-form-item> 
                                <nz-form-label [nzSpan]="6">{{validateForm.value.status==='0'?'异常描述':'正常原因'}}</nz-form-label>
                                <nz-form-control [nzSpan]="14">
                                    <textarea nz-input formControlName='scription'  [placeholder]="validateForm.value.status==='0'?'请确认异常利用率':'请输入至少五个字符'" [nzAutosize]="{ minRows: 3 }"></textarea>
                                </nz-form-control>
                            </nz-form-item>                      
                        </form>
                    </div>
                    <div *nzModalFooter>
                        <button nz-button nzType="default" (click)="handleCloseOrCancel()">取消</button>
                        <button nz-button nzType="primary" type="submit" (click)="submitForm()">确定</button>
                    </div>
                </nz-modal>
               `,
    styleUrls: ['./components.less']
})

export class UtilizationComponent implements OnInit {
    isVisible = false;
    validateForm!: FormGroup;

    ngOnChanges(changes: SimpleChanges): void {
        if(changes){
           this.validateForm.patchValue({scription:''})
        }
        
    }

    handleCloseOrCancel(): void {
        this.isVisible = false
        this.validateForm.reset({
            status:'0',
            scription:''
        })
    }
    
    submitForm(): void {
        console.log(this.validateForm.value)
        this.validateForm.reset({
            status:'0',
            scription:''
        })
        this.isVisible = false
    }

    option1: object = {
        title: {
            text: '周度利用率',
            left: 'center',
            textStyle: {
                color: '#f0f0f2'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}:({d}%)'
        },

        series: [
            {
                type: 'pie',


                label: {
                    show: false
                },
                data: [

                    { value: 42.75, name: '利用', itemStyle: { color: '#0000ff' } },
                    { value: 57.25, name: '未利用', itemStyle: { opacity: 0 } },
                ],

            }
        ]
    }
    option2: object = {
        title: {
            text: '月度利用率',
            left: 'center',
            textStyle: {
                color: '#f0f0f2'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}:({d}%)'
        },

        series: [
            {
                type: 'pie',


                label: {
                    show: false
                },
                data: [

                    { value: 51.94, name: '利用', itemStyle: { color: '#ff0000' } },
                    { value: 48.06, name: '未利用', itemStyle: { opacity: 0 } },
                ],

            }
        ]
    }
    option3: object = {
        title: {
            text: '年度利用率',
            left: 'center',
            textStyle: {
                color: '#f0f0f2'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}:({d}%)'
        },

        series: [
            {
                type: 'pie',


                label: {
                    show: false
                },
                data: [

                    { value: 53.73, name: '利用', itemStyle: { color: '#008000' } },
                    { value: 46.27, name: '未利用', itemStyle: { opacity: 0 } },
                ],

            }
        ]
    }
    constructor(private fb: FormBuilder) { }
    ngOnInit(): void {
        this.validateForm = this.fb.group({
            scription: [''],
            status: ["0"]
        })
    }
}